<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'

  defineOptions({
    name: 'CustomTitle7',
  })

  const props = defineProps({
    title: {
      type: String,
      default: () => '这是标题',
    },
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    desc: {
      type: String,
      default: () => '',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
  })

  const mainColorBlockStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      maxWidth: '76%',
      minWidth: '7%',
      padding: '0 20px 0 20px',
      position: 'absolute',
      left: '0',
      top: '0',
      bottom: '0',
      'border-top-left-radius': '14px',
      'border-bottom-right-radius': '14px',
      zIndex: '99',
    }
  })

  const subColorBlockContentStyle = computed<CSSProperties>(() => {
    return {
      height: '100%',
      backgroundColor: props.dividerColor,
      opacity: '0.2',
      width: '100%',
    }
  })

  const titleStyle = computed<CSSProperties>(() => {
    return {
      color: props.titleColor,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      width: '100%',
    }
  })
</script>

<template>
  <div class="custom-title7">
    <div class="title-container">
      <div class="main-color-block" :style="mainColorBlockStyle">
        <div class="title" :style="titleStyle">{{ props.title }}</div>
      </div>

      <div class="sub-color-block">
        <div class="sub-color-block-content" :style="subColorBlockContentStyle"></div>
      </div>
    </div>

    <div v-if="props.desc" class="desc">
      {{ props.desc }}
    </div>
  </div>
</template>

<style scoped lang="scss">
  .custom-title7 {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .title-container {
      height: 28px;
      width: 100%;
      position: relative;

      .sub-color-block {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        padding-left: 20px;
      }
    }

    .desc {
      color: gray;
    }
  }
</style>
